iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 2
2
Modern Web

實作小範例入門 Vue & Vuex 2.0系列 第 2

vue & vuex 02 - 使用 Vue-cli 安裝 vue 和 webpack 環境與相關套件

  • 分享至 

  • xImage
  •  

開始之前

請先安裝 node.js

Vue-cli 最低版本需求:(重要)

  • node 4
  • npm 3

最新版 Vue-cli 使用了 vue 2.1
原本電腦一直使用 node v4.4.3 即使安裝了 npm 3 也是 run 不起來。

目前版本:

node -v
v6.9.2

npm -v
3.10.9

什麼 Vue-cli ?

vue-cli 可以說是作者開發的 vue 懶人開發包,裡面包含有 5 種結構,從最基礎的 simplebrowserify 以及 webpack 版本皆可以自由選擇。

安裝 vue-cli 在 command line 介面中執行:

npm install -g vue-cli

-gnpm 安裝語法將套件安裝在全域環境的意思。
npm(內建) 是 node.js 安裝套件的管理工具之一,其他還有 facebook 的 YARN

安裝 webpack 在 command line 介面中執行:

vue init webpack your-project-name

your-project-name -> 只需命名你喜歡的 project 名稱,cli 將會幫你產生此資料夾,並安裝你選定的結構。

為什麼選用 webpack ?

主要想使用 Hot-loader 功能體驗快速反應的開發系統,與最新的自動化建構工具。

什麼是 Hot-loader ?

你可以想像成 live-reload 的進階版本,Hot-loader 會直接在畫面上更新,改變你剛剛改好的程式碼。

比較圖:

| 套件 | 功能 | 畫面更新 | 資料重新 load |
|---|---|---|
| live-reload | 幫你按 F5 | 是 | 資料須重新 key |
| Hot-loader | 直接更新程式 | 是 | 資料會存在 |

想像一下我們開發一個功能,更改了顏色,我不需要從登入開始一步一步點到那個畫面,按下存檔的瞬間,它就幫我把顏色更新上去了!

webpack 開發包選項:

因為我們的目標是 學習 vue 因此,我們將不選擇安裝 test 與 coding style.

如果是多人共同開發的專案中,還是建議使用 coding style 內建有 airbnb 選項。

選項:

  • Project name learnVue
  • Project decsription learnVue
  • Auther hungjie19
  • User ESLine to lint your code? No
  • Pick an ESLine preset
  • Setup unit tests with Karma + Mocha? No
  • Setup e2e tests with Nigthwatch? No

經過以上詢問式設定,安裝完成 webpack 開發包的結構後:

  1. 移動到開發包中:
cd your-project-name
  1. 透過 npm 安裝相依套件
npm install
  1. 執行開發版
npm run dev

稍等一下 webpack 正在 build 與 setup server..

接著就可以在 http://localhost:8080 看到預設的 Vue Hello Page!
http://ithelp.ithome.com.tw/upload/images/20161209/20103326SAC2xlUuUv.png
可以快快樂樂的開始學習 Vue 囉 :)


github 完整範例:

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。


上一篇
vue & vuex 01 - Vue Introduction & 鐵人賽說明
下一篇
vue & vuex 03 - Hello World & 雙向綁定
系列文
實作小範例入門 Vue & Vuex 2.030
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言